<HTML>
<!--This file created 5/14/00 1:50 PM by Claris Home Page version 3.0-->
<HEAD>
   <TITLE>Realm Set</TITLE>
   <META NAME=GENERATOR CONTENT="Claris Home Page 3.0">
   <X-CLARIS-WINDOW TOP=66 BOTTOM=600 LEFT=8 RIGHT=782>
   <X-CLARIS-TAGVIEW MODE=minimal>
</HEAD>
<BODY TEXT="#003333" BGCOLOR="#FFFFFF" LINK="#000066" ALINK="#0033FF" VLINK="#003399" BACKGROUND="realmpap.gif">
<P><IMG SRC="spacer.gif" WIDTH=100 HEIGHT=500 BORDER=0 ALIGN=left><TABLE BORDER=0 CELLPADDING=3 WIDTH=650>
   <TR>
      <TD WIDTH=638>
         <CENTER><TABLE BORDER=0 WIDTH=638>
            <TR>
               <TD ALIGN=center WIDTH=150>
                  <P><A HREF="http://www.fortunecity.com/rivendell/rhydin/713/goodies.html"><IMG SRC="realmbylyssa.gif" WIDTH=144 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT BORDER=0 ALIGN=bottom></A></P>
               </TD>
               <TD WIDTH=474>
                  <P>Lyssa's Websets are linkware. Please include
                  this matching logo on every page you use any of the
                  elements on and link it to <A HREF="http://www.fortunecity.com/rivendell/rhydin/713/goodies.html">http://www.fortunecity.com/rivendell/rhydin/713/goodies.html</A>.
                  You can place the logo anywhere so long as it is on
                  the same page as the element(s). Click on the link
                  or graphic when you are ready to return to Goodies
                  of the Realm.</P>
               </TD>
            </TR>
         </TABLE>
         <IMG SRC="realmtitle.gif" WIDTH=324 HEIGHT=230 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <BR>
         </CENTER>
         
         <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE><CENTER><FONT SIZE="+1">This
                     is a set I made when I got tired of the
                     beautiful but slow-loading and difficult to work
                     with Moyra's Web Jewels set that had previously
                     been used for my website. I wanted something
                     fanciful to capture the mood of Lyssa's Realm of
                     Fantasy, and the white background allowed me to
                     get dramatic with my elements without looking
                     too crowded, plus I was able to control and
                     optimize file size so the graphics looked great
                     but loaded sometime before the reader fell
                     asleep at the keyboard.</FONT>
                     
                     <P><FONT SIZE="+1">You'll find a few basic web
                     design tips below to help you use your layout
                     effectively with this and other sets. I've
                     assumed on this that you either already know the
                     10 basic HTML tags or have a WYSIWIG HTML editor
                     to handle that part for you, such as Claris Home
                     Page, Netscape Communicator, or Adobe PageMill.
                     I'd recommend these if you're like me and like
                     to write in HTML and then get instant one-click
                     viewing to check your layout. Text-only HTML
                     editors are good for text only pages, but hey,
                     we want the eye candy,
                     right?</FONT></P></CENTER></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
         
         <CENTER><IMG SRC="realmrule.gif" WIDTH=411 HEIGHT=65 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <TABLE BORDER=0 CELLSPACING=20 WIDTH=638>
            <TR>
               <TD VALIGN=top WIDTH=630>
                  <P><IMG SRC="realmleftg.gif" WIDTH=108 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=left>This
                  is a bordered background, so you'll need to take
                  that into consideration in your layout to keep from
                  having your elements run over the border picture.
                  The trick here is to make your very first element
                  spacer.gif (see below). You need to make it wide
                  enough to cover the border area but make sure it
                  has no visible border itself. The tag for this page
                  looks like &lt;IMG SRC="spacer.gif" WIDTH=100
                  HEIGHT=500 BORDER=0 ALIGN=left&gt;. Note that the
                  alignment is left, making your next element appear
                  immediately next to the spacer.gif graphic. Next,
                  you will want to create a page table, which will be
                  a single row, single column, fixed width table
                  immediately following your spacer.gif. In this
                  case, I used the tag &lt;TABLE BORDER=0
                  CELLPADDING=3 WIDTH=650&gt;. A border of 0 gives us
                  an invisible table. Remember, padding is the number
                  of pixels between data in a cell and the border,
                  spacing is the amount of space between cells. Since
                  there is only one cell, the spacing attribute is
                  not needed. A fixed width keeps the page table from
                  running over a second horizontal tiling of your
                  background graphic even with different browser and
                  monitor settings. You will want to leave out the
                  height attribute so that viewers who alter the font
                  size or any other aspect of your page when veiwing
                  will not lose elements. Once you have your page
                  table completed, arrange all of your visible
                  elements inside of it as if it were a page on a
                  normally tiled or non-graphical background. Hey,
                  you've conquered nesting tables! Go tell people
                  you're not just a web publisher, you're a web
                  designer! Okay, there's a bit more to complex
                  website layout, but nesting tables is probably the
                  biggest trick you'll ever need for a simple page,
                  so you're sitting prettier than a lot of the people
                  out there with ho-hum pages.</P>
               </TD>
            </TR>
            <TR>
               <TD ALIGN=right VALIGN=top WIDTH=630>
                  <P><IMG SRC="spacer.gif" ALT="This is a spacer.gif." WIDTH=100 HEIGHT=100 BORDER=3 ALIGN=right this is a spacer.gif.><IMG SRC="spacer.gif" WIDTH=4 HEIGHT=106 BORDER=0 ALIGN=right>This
                  is the mystical, magical spacer.gif. Learn it, use
                  it, love it, it can be your best friend in webpage
                  layout. Normally it is invisible, but I've put a
                  border on it so you can see it. It's simply a blank
                  graphic that can be used to create empty space
                  within your webpage. Be sure not to give it any
                  extra html attributes like I did here so that
                  nothing will show up when someone runs their mouse
                  over it. The tag used for this spacer is &lt;IMG
                  SRC="spacer.gif" ALT="This is a spacer.gif."
                  WIDTH=100 HEIGHT=100 BORDER=3 ALIGN=right&gt; but
                  to make it invisible, use a border of 0. Use this
                  spacer.gif to create empty space wherever you would
                  like but do not wish to use a table. (Hint, there
                  are actually two spacer.gifs used here. One is
                  invisible and was used to create space between the
                  graphic and the text.) Spacers can also be used
                  within a table, or anywhere you want to seperate
                  elements invisibly. Now that you've got nesting
                  tables and spacer graphics mastered, you can create
                  slightly more controlled looking web pages without
                  having to master CSS1, CSS2, DHTML.. yeah, all the
                  stuff that makes you dizzy and keeps you from
                  thinking you'll ever have a page look the way you
                  want it to. (Psst, once you've played with the
                  tricks of basic HTML for a while, go ahead and get
                  a book or two on the heavier stuff. It's really not
                  as hard as it looks, and soon you'll be cascading
                  and javascripting like a pro.)</P>
               </TD>
            </TR>
            <TR>
               <TD VALIGN=top WIDTH=630>
                  <P><IMG SRC="realmmagnify.gif" WIDTH=50 HEIGHT=65 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=left>Here's
                  a neat tip for creating smooth and neat looking
                  text that appears to flow around an object using
                  basic HTML. Insert a graphic in front of your text
                  and give it the alignment attribute ALIGN=left or
                  ALIGN=right. This is useful for creating the look
                  of paragraph indentation, as was done here. The tag
                  I used looks like &lt;IMG SRC="realmmagnify.gif"
                  WIDTH=50 HEIGHT=65 ALIGN=left&gt;. (Note that I
                  included the image width and height, even though
                  those are the actual dimensions of the image. This
                  loads the size of the image in along with the text
                  and keeps your text from jumping around as graphics
                  load. You want to include dimensions in your HTML
                  whenever possible.) You can use this trick with a
                  graphic of the first letter in your text to mimic
                  old manuscripts, or try using the spacer.gif to
                  create an invisible indentation, like you'll see in
                  the next paragraph.</P>
                  
                  <P><IMG SRC="spacer.gif" WIDTH=20 HEIGHT=2 BORDER=0 ALIGN=left>Be
                  sure to keep the height of the spacer.gif small
                  enough so that it only covers one line of text,
                  even with different font size settings. The tag on
                  this one is &lt;IMG SRC="spacer.gif" WIDTH=20
                  HEIGHT=2 BORDER=0 ALIGN=left&gt;. Align the text so
                  that it is on the same side of the page as your
                  indentation element. You may also want to put each
                  paragraph in a seperate cell of a table, as was
                  done here, to keep them from accidental overlaps.
                  Note that even if you are using an alignment of
                  right, you want to insert your graphic in front of
                  the text. Objects aligned to the right will proceed
                  in order from right to left on the page, so insert
                  the item you want furthest to the right in
                  front.</P>
               </TD>
            </TR>
         </TABLE>
          <IMG SRC="realmrule.gif" WIDTH=411 HEIGHT=65 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <BR>
         <FONT SIZE="+2"><I>Subtitles</I></FONT><BR>
         Use these subtitles to link to other pages in your
         website.<BR>
         <IMG SRC="realmartworkg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmgalleryg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmphotosg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmwritingg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmhomeg.gif" WIDTH=144 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmnextg.gif" WIDTH=144 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmbackg.gif" WIDTH=144 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmlinksg.gif" WIDTH=144 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmaboutmeg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmemailmeg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmframesg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><IMG SRC="realmnoframesg.gif" WIDTH=252 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <BR>
         <FONT SIZE="+2"><I>Blank Titles</I></FONT><BR>
         Use these blank titles to create your own custom title
         graphic by layering text over the image.<BR>
         
         <P><IMG SRC="realmwelcometog.gif" WIDTH=216 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmttlblankb.gif" WIDTH=324 HEIGHT=230 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmwhatsnewg.gif" WIDTH=216 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom></P>
         
         <P><IMG SRC="realmwelcometob.gif" WIDTH=216 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmttlblankg.gif" WIDTH=324 HEIGHT=230 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmwhatsnewb.gif" WIDTH=216 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <BR>
         <BR>
         <FONT SIZE="+2"><I>Graphic Rules</I></FONT><BR>
         Use these for graphics seperation of the sections of your
         page.<BR>
         <IMG SRC="realmrule.gif" WIDTH=411 HEIGHT=65 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmruleg.gif" WIDTH=576 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmruleb.gif" WIDTH=576 HEIGHT=36 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <IMG SRC="realmgoldrule.gif" WIDTH=504 HEIGHT=29 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT ALIGN=bottom><BR>
         <BR>
         <BR>
         <TABLE BORDER=0 WIDTH=500>
            <TR>
               <TD WIDTH=492>
                  <P><A HREF="realmset2.html"><IMG SRC="realmrightb.gif" WIDTH=108 HEIGHT=72 X-CLARIS-USEIMAGEWIDTH X-CLARIS-USEIMAGEHEIGHT BORDER=0 ALIGN=left></A></P>
                  
                  <P><A HREF="realmset2.html"><FONT SIZE="+2"><I>Graphic
                  Elements and Bonus Graphics for this
                  set</I></FONT></A></P>
               </TD>
            </TR>
         </TABLE>
         </P></CENTER>
      </TD>
   </TR>
</TABLE>
</P>
</BODY>
</HTML>
